<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/mobile/include/taglib.jsp"%>
<html>
<head>
	<title>订单详情</title>
	<%@include file="/WEB-INF/views/mobile/include/head.jsp" %>
	<style type="text/css">
	
	</style>
	<script type="text/javascript">
		var appId = '${appId}';
		var sid="${merchant.id}";
		var mobile="${mobile}";
		var classifyId = "${classifyId}";
		var shopModel = "${shopModel}";
		var ctxFront = "${ctxFront}";
		var ctxShop = "${ctxShop}";
		var totalAmount = ${totalAmount};
		var addressLen = ${fn:length(addresses)};
		var hasPrize = ${hasPrize};
		var gift = ${gift};//是否存在新用户礼包
		var $fee = ${fee};//派送费
		var $lowFee = ${lowFee};//起送费
		var $area = "${area}";//收货地址所在地区
		var $flag = true;//收货地址所在区域在配送范围内
		$(document).ready(function() {
			$("#listForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			
			$("#listForm").bind("click", function(){
				if(!$(".more-menu").is(":hidden")){
					$(".more-menu").slideToggle(500);
				}
			});
			
			$(".poster").bind("click", function(){
				if(!$(".more-menu").is(":hidden")){
					$(".more-menu").slideToggle(500);
				}
				loading('正在跳转，请稍等...');
				setTimeout(function(){
					hideLoader();
					document.location="${ctxShop}/sysPoster?posterId=${merchant.activityPoster.id }&appId="+appId;				
				},1000);
			});
			
			$(".clause").bind("click", function(){
				if(!$(".more-menu").is(":hidden")){
					$(".more-menu").slideToggle(500);
				}
				loading('正在跳转，请稍等...');
				setTimeout(function(){
					hideLoader();
					document.location="${ctxShop}/sysClause?clauseId=${merchant.merchantClause.id }&appId="+appId;				
				},1000);
			});
			
			$(".phone").bind("click", function(){
				$(".more-menu").hide();
				$("#phonePopup").popup("open");
			});
			//初始化日期
			//initDate();
			//初始化‘添加收货地址’界面
			$("#addr_header").hide();
			$("#addr_footer").hide();
			$("#pro_header").hide();
			//检测总金额
			checkTotalAmount();
			refreshReceiptTime();
		});
		
		//日期控件初始化 2014-11-12（此方法已无用）
		function initDate(){
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth();
			var day = date.getDate();
		    $('#deliveryDate').mobiscroll().date({
		    	theme: 'android', 
				mode: 'scroller', 
				minDate: new Date(year, month, day, 00, 00),
		        maxDate: new Date(2050, 12, 31, 23, 59),
				display: 'modal',
				lang: 'zh'
			});
		}
		
		function choicePayType(num){
			for(var i=1; i<=4; i++){
				if(i==num){
					$("img[id='payType"+num+"']").attr("src", "${ctxFront }/images/shop/radio-icon1.png");
					$(".pay-choice li:eq("+num+")").find("a").css("background", "rgb(241, 241, 241)");
					$("input[id='payType']").val(num);
				}else{
					$("img[id='payType"+i+"']").attr("src", "${ctxFront }/images/shop/radio-icon2.png");
					$(".pay-choice li:eq("+i+")").find("a").css("background", "rgb(255, 255, 255)");
				}
			}
		}
		
		var isCheck = false;
		function choiceRemark(bl){
			if(isCheck && bl!=isCheck){ 
				isCheck = false;
				return;
			} 
			if($("#checkRemark").attr("status")=="0"){
				$("#checkRemark").attr("status", "1");
				$("#checkRemark").attr("src", "${ctxFront }/images/shop/checkbox-icon1.png")
				$("#checkRemark").parent().parent().css("background", "rgb(241, 241, 241)");
				$(".order-remarks").show();
			}else{
				$("#checkRemark").attr("status", "0");
				$("#checkRemark").attr("src", "${ctxFront }/images/shop/checkbox-icon2.png")
				$("#checkRemark").parent().parent().css("background", "rgb(255, 255, 255)");
				$(".order-remarks").hide();
				$("#remarks").val("");
			}
			isCheck = bl;
		}
		function showAddressDiv(){
			$(".search_bg").show();
			$(".address-div").animate({top:"10%", 'opacity': "1"},500);
		}
		function closeAddressDiv(){
			$(".address-div").animate({top:"100%", 'opacity': "0"},500);
			$(".search_bg").hide();
		}
		function choiceAddress(num, county){
			//var len = ${fn:length(addresses)};
			var len = addressLen;
			for(var i=1; i<=len; i++){
				if(i==num){
					$("img[id='address"+num+"']").attr("src", "${ctxFront }/images/shop/radio-icon1.png");
					$(".address-choice li:eq("+num+")").find("a").css("background", "rgb(241, 241, 241)");
					var addressChoice = $(".address-choice li:eq("+num+")");
					$("input[id='userAddress']").val(addressChoice.attr("id"));
					var addressDetail = addressChoice.find("label.choice-address-detail").html();
					$("#address-detail").html(addressDetail);
					$area = county;
				}else{
					$("img[id='address"+i+"']").attr("src", "${ctxFront }/images/shop/radio-icon2.png");
					$(".address-choice li:eq("+i+")").find("a").css("background", "rgb(255, 255, 255)");
				}
			}
			closeAddressDiv();
			//过滤收货时间
			refreshReceiptTime();
		}
		function submitOrder(){
			//验证是否登录
			if(!checkLogin()) return;
			
			if($("#userAddress").val()==""){
				openPopup("请选择收货地址.");
				closePopup(2000);
				return;
			}else if(!$flag){
				openPopup("您所选的区域尚未开通配送服务.");
				closePopup(3000);
				return;
			}else if($("#timeSlot").val()=="" || $("#timeSlot").val()==null){
				openPopup("请选择收货时间.");
				closePopup(2000);
				return;
			}
			
			loading('正在提交，请稍等...');
			setTimeout(function(){
				hideLoader();
				$("#listForm").submit();				
			},1000);
		}
		var localUrl = window.location.href.split("#")[0];
		//页面跳转
		function jumpPage(href){
			if(href=="#mainPage"){//跳转到首页
				$("#main_footer").show();
				$("#addr_footer").hide();	
			}else if(href=="#addAddrPage"){//跳转到添加地址首页
				//隐藏订单详情页眉页脚信息
				$("#main_footer").hide();
				//显示添加地址首页的页眉页脚
				$("#addr_footer").show();	
				document.location="iEvent://setNavgitionInfo?fun=iEventSetHeaderTitle()";
			}
			document.location.href=localUrl+href;
		}
		//修改收货地址重新获取收货时间段
		function refreshReceiptTime(){
			$("#timeSlot").val("");
			$("#timeSlot").html("");
			$("span[class='receiptTime']").text("请选择收货时间");
			if($("span[class='receiptTime valid']").text()!=""){
				$("span[class='receiptTime valid']").text("请选择收货时间");
			}
			//异步保存活动
			$.ajax({
				type: 'post',
				url: '${ctxShop}/getReceiptTime',
				data: 'county='+$area+'&merchantId='+sid,
				dataType: 'json',
				success: function(data){
					if(data!=null && data.length>0){
						$("#timeSlot").append("<option value=''>请选择收货时间</option>");
						for(var i=0; i<data.length; i++){
							var item = data[i];
           					$("#timeSlot").append("<option value='"+item.id+"'>"+item.name+"</option>");
           				}
           				$flag=true;
					}else{
						$flag=false;
					}
				},
				failure: function(){
				}
			});
		}
		//验证收货地址是否在配送区域内
		function checkArea(){
			if(!$flag){
				openPopup("您所选的区域尚未开通配送服务.");
				closePopup(3000);
				return;
			}
		}
	</script>
	<script type="text/javascript"> 
		var iEventGoBack = function(){}
		function iEventGetNavgitionInfo(){
			$("#addr_footer").hide();
			$("#main_footer").show();
			iEventGoBack = function(){
				if(${type=='cart'}){
					document.location="ievent://quitWebView";
				}
				/*else if(${type=='shoppingCart'}){
					document.location="${ctxShop}/shoppingcart?sid="+sid+"&mobile="+mobile+"&classifyId="+classifyId+"&shopModel="+shopModel+"&appId="+appId;	
				}*/
			}
			var result = {
				title:"订单详情",
			    leftBtn:{ 
			    	type:${type=='cart'?0:2},	//0只显示返回,1只显示关闭，2显示返回，关闭
					backFun:""   //返回执行的事件，不带的话由iOS控制。
				}
			};
			if($global_isAndroid){
				window.control.onJsComplete(JSON.stringify(result));
				return;
			}
			return JSON.stringify(result);
		}
		function iEventShowMore(){
			showMoreMenu();
		}
	</script>
</head>
<body>
<div data-role="page" id="mainPage">
	<div role="main" class="ui-content" style="padding:0em 1em 3em 1em;">
		<div id="popup" data-role="popup" data-position-to="window" data-overlay-theme="a" data-theme="b" class="ui-content">
		  <p></p>
		</div>
		<%@include file="/WEB-INF/views/mobile/layouts/checkLoginPopup.jsp" %>
		<div id="search_bg" class="search_bg" onclick="closeAddressDiv()"></div>
		<div class="fudong-div address-div">
			<ul data-role="listview" data-inset="true" data-divider-theme="a" style="margin: 0px;" class="address-choice">
			    <li data-role="list-divider">
			    	<div class="title-icon"><img src="${ctxFront }/images/shop/icon_2.png" alt="收货信息"></div>用户收货地址
			    	<label class="float-right"><a href="javascript:" onclick="closeAddressDiv()">关闭</a></label>
			    	<label class="float-right" style="margin-right: 15px;"><a href="javascript:" onclick="jumpPage('#addAddrPage')">添加</a></label>
			    </li>
		        <c:forEach items="${addresses}" var="address" varStatus="vs">
			    <li class="address-option" id="${address.id }" data-icon="false">
			    	<a href="#" class="address" onclick="choiceAddress(${vs.index+1},'${address.county }')" style="${address.defaultFlag==1?'background: rgb(241, 241, 241);':'background: rgb(255, 255, 255);'} ">
		    		<label class="float-left choice-address-detail" style="margin: 0em;">
		    			${address.name }&nbsp;&nbsp;${address.phone }<br/>
		    			${address.detailAddress }
		    		</label>
		    		<label class="float-right" style="margin: 5px 0px 0px 0px;">
		    			<c:if test="${address.defaultFlag==1}">
							<img src="${ctxFront }/images/shop/radio-icon1.png" id="address${vs.index+1 }" alt="" onclick="choiceAddress(${vs.index+1},'${address.county }')" width="20" height="20" style="margin-top: 5px;">						    				
		    			</c:if>
		    			<c:if test="${address.defaultFlag==0}">
		    				<img src="${ctxFront }/images/shop/radio-icon2.png" id="address${vs.index+1 }" alt="" onclick="choiceAddress(${vs.index+1},'${address.county }')" width="20" height="20" style="margin-top: 5px;">
		    			</c:if>
		    		</label>
		    		<c:if test="${address.defaultFlag==1}">
		    		<label class="float-right" style="margin: 5px 1em 0px 0px; color: red;">
		    			(默认地址)
		    		</label>
		    		</c:if>
			    	</a>
				</li>
	        	</c:forEach>
			</ul>
		</div>
		<%@include file="/WEB-INF/views/mobile/layouts/shopCommon.jsp" %>
		<form:form id="listForm" modelAttribute="order" action="${ctxShop}/order/save" method="post" class="form-horizontal">
		<input type="hidden" id="appId" name="appId" value="${appId }"/>
		<form:hidden path="payType"/>
		<form:hidden path="merchant.id"/>
		<form:hidden path="totalNumber"/>
		<form:hidden path="amount"/>
		<form:hidden path="user.id"/>
		<input type="hidden" name="classifyId" value="${classifyId }"/>
		<input type="hidden" name="shopModel" value="${shopModel }"/>
		<input type="hidden" id="userAddress" name="userAddress.id" value="${order.userAddress.id }" />
		<!-- 收货地址 -->
		<ul data-role="listview" data-inset="true" data-divider-theme="a">
		    <li data-role="list-divider">
		    	<div class="title-icon"><img src="${ctxFront }/images/shop/icon_2.png" alt="收货信息"></div>收货信息
		    </li>
		    <li class="formAddress" data-icon="false" style="${defaultAddress.id == null?'display:none;':''}" onclick="showAddressDiv()">
		    	<a href="#" class="address">
		    		<p id="address-detail" class="float-left" style="margin: 0em; font-size: 16px; width: 90%;">
		    			${defaultAddress.name }&nbsp;&nbsp;${defaultAddress.phone }<br/>
		    			<span id="addressInfo">${defaultAddress.detailAddress }</span>
		    		</p>
		    		<label class="float-right" style="margin: 9px 0px 0px 0px;"><img src="${ctxFront }/images/shop/icon_7.png" alt="收货地址" width="15" height="22.5"></label>
		    	</a>
		    </li>
	    	<li class="startAddress" data-icon="false" style="${defaultAddress.id != null?'display:none;':''}">
		    	<a href="#" onclick="jumpPage('#addAddrPage')" data-rel="popup" data-position-to="window" data-transition="pop" style="vertical-align: middle; line-height: 30px;">
		    		<p id="address-detail" class="float-left" style="margin: 0em; font-size: 16px; width: 90%;">
		    			请填写收货人信息
		    		</p>
		    		<label class="float-right" style="margin: 9px 0px 0px 0px;"><img src="${ctxFront }/images/shop/icon_7.png" alt="收货地址" width="15" height="22.5"></label>
		    	</a>
		    </li>
		</ul>
		<!-- 支付方式 -->
		<ul data-role="listview" data-inset="true" data-divider-theme="a" class="pay-choice">
		    <li data-role="list-divider"><div class="title-icon"><img src="${ctxFront }/images/shop/icon_1.png" alt="支付方式"></div>支付方式</li>
		    <li data-icon="false">
		    	<a href="#" onclick="choicePayType(1)" style="border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: rgb(207, 207, 207); background: rgb(241, 241, 241); padding-right: .5em;">
		    		<div class="pay-icon"><img src="${ctxFront }/images/shop/pay_1.png" alt="货到付款"></div>
		    		<label class="float-left" style="font-size: 14px;">货到付款</label>
		    		<!-- <p class="float-left huise-max-color" style="font-size: 14px; color: #bbb; width: 36%;">送货上门后再收款</p> -->
		    		<label class="float-right" style="margin-right: 0em;"><img src="${ctxFront }/images/shop/radio-icon1.png" id="payType1" alt="" onclick="choicePayType(1)" width="20" height="20" style="margin-top: 5px;"></label>
		    	</a>
		    </li>
		    <li data-icon="false">
		    	<a href="#" onclick="choicePayType(2)" style="border-top-style: none; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: rgb(207, 207, 207); background: rgb(255, 255, 255); padding-right: .5em;">
		    		<div class="pay-icon"><img src="${ctxFront }/images/shop/pay_2.png" alt="支付宝帐号支付"></div>
		    		<label class="float-left" style="font-size: 14px;">支付宝支付</label>
		    		<label class="float-right" style="margin-right: 0em;"><img src="${ctxFront }/images/shop/radio-icon2.png" id="payType2" alt="" onclick="choicePayType(2)" width="20" height="20" style="margin-top: 5px;"></label>
		    	</a>
		    </li>
		    <li data-icon="false">
		    	<a href="#" onclick="choicePayType(3)" style="border-top-style: none; background: rgb(255, 255, 255); padding-right: .5em;">
		    		<div class="pay-icon"><img src="${ctxFront }/images/shop/pay_3.png" alt="储蓄卡便捷支付"></div>
		    		<label class="float-left" style="font-size: 14px;">银联支付</label>
		    		<!-- <p class="float-left huise-max-color" style="font-size: 14px; color: #bbb; width: 28%;">银联无卡支付</p> -->
		    		<label class="float-right" style="margin-right: 0em;"><img src="${ctxFront }/images/shop/radio-icon2.png" id="payType3" alt="" onclick="choicePayType(3)" width="20" height="20" style="margin-top: 5px;"></label>
		    	</a>
		    </li>
		    <li data-icon="false" style="display: none;">
		    	<a href="#" onclick="choicePayType(4)" style="border-top-style: none; background: rgb(255, 255, 255); padding-right: .5em;">
		    		<div class="pay-icon"><img src="${ctxFront }/images/shop/pay_4.png" alt="信用卡便捷支付"></div>
		    		<label class="float-left" style="font-size: 14px;">信用卡便捷支付</label>
		    		<p class="float-left huise-max-color" style="font-size: 14px; color: #bbb; width: 28%;">无需开通网银</p>
		    		<label class="float-right" style="margin-right: 0em;"><img src="${ctxFront }/images/shop/radio-icon2.png" id="payType4" alt="" onclick="choicePayType(4)" width="20" height="20" style="margin-top: 5px;"></label>
		    	</a>
		    </li>
		</ul>
		<!-- 收货日期 -->
		<!-- <ul data-role="listview" data-inset="true" data-divider-theme="a" class="receiptTime-module">
		    <li data-role="list-divider"><div class="title-icon"><img src="${ctxFront }/images/shop/icon_3.png" alt="收货日期"></div>收货日期</li>
		    <li data-icon="false" class="order-deliveryDate" style="padding:0em;">
		    	<input type="text" id="deliveryDate" name="deliveryDate" value="${order.deliveryDate==null?'': order.deliveryDate}" placeholder="请选择收货日期"/>
		    </li>
		</ul>-->
		<!-- 收货时间 -->
		<ul data-role="listview" data-inset="true" data-divider-theme="a" class="receiptTime-module">
		    <li data-role="list-divider"><div class="title-icon"><img src="${ctxFront }/images/shop/icon_3.png" alt="收货时间"></div>收货时间</li>
		    <li data-icon="false" style="padding:0em;">
		    	<label class="drop-icon"><img src="${ctxFront }/images/shop/drop.png" width="22.5" height="15"></label>
		    	<form:select id="timeSlot" path="timeSlot.id" data-icon="false" class="receiptTime" onclick="checkArea()">
					<form:option value="" label="请选择收货时间"/>
					<!-- 
					<c:forEach items="${receiptTime.choiceReceiptTimes}" var="choiceTime">
						<form:option value="${choiceTime[0]}" label="${choiceTime[1]}"/>
					</c:forEach>
					 -->
				</form:select>
		    </li>
		</ul>
		<!-- 备注信息 -->
		<ul data-role="listview" data-inset="true" data-divider-theme="a" class="pay-remark">
		    <li data-role="list-divider"><div class="title-icon"><img src="${ctxFront }/images/shop/icon_4.png" alt="备注信息"></div>备注信息</li>
		    <li data-icon="false">
		    	<a href="#" style="padding-right: .5em;">
		    		<label class="float-left" style="margin: 0em;">订单备注（选填）</label>
		    		<!-- label class="float-right" style="margin: 0em;"><img src="${ctxFront }/images/shop/checkbox-icon2.png" id="checkRemark" status="0" alt="" onclick="choiceRemark(true)" width="20" height="20"></label -->
		    	</a>
		    </li>
		    <li data-icon="false" class="order-remarks" style="padding:0em;">
		    	<form:textarea path="remarks" style="padding-left: 1em;" htmlEscape="false" rows="2" maxlength="200" class="input-xxlarge" placeholder="请输入备注信息"/>
		    </li>
		</ul>
		<!--订单信息 -->
		<ul data-role="listview" data-inset="true" data-divider-theme="a" style="display: none;">
		<li data-role="list-divider"><div class="title-icon"><img src="${ctxFront }/images/shop/icon_5.png" alt="订单信息"></div>订单信息(共${totalNumber }件)</li>
		<c:if test="${fn:length(list) != 0}">
		<c:forEach items="${list}" var="cart" varStatus="vs">
			<li data-icon="false">
				<a href="#">
				    <label class="float-left huise-max-color" style="width: 50%;">${cart.product.name }</label>
				    <label class="float-left price-color" style="width: 30%;">${cart.number }</label>
				    <label class="float-left price-color" style="width: 20%;">￥${cart.amount }</label>
			    </a>
		    </li>
		</c:forEach>
		</c:if>
		</ul>
		<!-- 结算信息 -->
		<ul data-role="listview" data-inset="true" data-divider-theme="a" style="display: none;">
		    <li data-role="list-divider"><div class="title-icon"><img src="${ctxFront }/images/shop/icon_6.png" alt="结算信息"></div>结算信息</li>
		    <li data-icon="false">
		    	<a href="#">
					<label class="float-left huise-max-color" style="width: 50%;">应付金额</label>
					<label class="float-right amount" style="width: 50%; text-align: right;">￥${totalAmount }</label>
				</a>
			</li>
		</ul>
		</form:form>
	</div>
	<div data-role="footer" class="ui-footer" data-position="fixed" data-tap-toggle="false" id="main_footer" style="background-color:white;border-color:#DDD">
		<div class="float-left footer-left">
			<div class="a">
				<label class="float-left totalTitle" style="width: 40%; text-align: left; margin-top: -10px;">总金额：</label>
				<label class="float-right amount totalAmount" style="width: 60%; text-align: right; margin-top: -10px;"><strong>￥${totalAmount }</strong>&nbsp;&nbsp;</label>
				<label class="float-right totalAmountDesc" style="width: 100%; text-align: right; font-size: 12px;">(含配送费<strong>${fee }</strong>元)&nbsp;&nbsp;</label>
	    	</div>
	    </div>
		<div class="float-right footer-right">
			<img class="float-right" alt="" src="${ctxFront }/images/shop/submit_order.png" height="35" style="margin: 7.5px 1em 7.5px 0px;" onclick="submitOrder()">
	    </div>
	</div><!-- /footer -->
</div>
<%@include file="/WEB-INF/views/mobile/layouts/addressForm.jsp" %>
</body>
</html>
